<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <!--{include file='comm/header.tpl'}-->
    <title>基础设置(多级)</title>
</head>
<body>
<style>
    .fbutton .add {
        background: url("/framework/flexigrid/css/images/add.png") no-repeat scroll left center rgba(0, 0, 0, 0);
    }
    div.tDiv {
        background: url("/framework/flexigrid/css/images/bg.gif") repeat-x scroll center top #FAFAFA;
        border-color: #CCCCCC #CCCCCC -moz-use-text-color;
        padding:8px;
    }
    #img_add_1,.add,a{
        cursor: pointer;
    }

    .items{
        width:73%;
    }
    .tal{
        text-align: center;
    }

    .helpHide{
        display:none;
    }
    .closeImg{background:url('/quanliadmin/docroot/images/comm/category_icon.png') no-repeat -20px 0px; width:14px;height:14px;margin:8px 6px 0px 10px;cursor:pointer;}

    .openImg{background:url('/quanliadmin/docroot/images/comm/category_icon.png') no-repeat 0px 0px; width:14px;height:14px;margin:8px 6px 0px 10px;cursor:pointer;}

    .childImg{background:url("/quanliadmin/docroot/images/comm/category_icon.png") no-repeat 0px -18px;width:14px;height:14px;margin:0px 6px 0px 10px;}

    .point{background:url('/quanliadmin/docroot/images/comm/point.png') no-repeat 0px 0px; width:8px;height:14px;margin:8px 6px 0px 16px;}

    .childCategory{width:16px;height:16px;background-image:url(/quanliadmin/docroot/images/comm/ImageBundle.gif);background-repeat:no-repeat;background-position:0 -14px;margin-left:34px;cursor:pointer;}

    .editCategory{width:16px;height:16px;background-image:url(/quanliadmin/docroot/images/comm/ImageBundle.gif);background-repeat:no-repeat;background-position:0 -181px;margin-left:34px;cursor:pointer;}

    .delCategory{width:16px;height:16px;background-image:url(/quanliadmin/docroot/images/comm/ImageBundle.gif);background-repeat:no-repeat;background-position:0 -133px;margin-left:34px;cursor:pointer;}
</style>

<div class="container">

   
        <div class="comm_content">
            <div class="items2" id = "cate_table" style="margin:0px auto;width:1130px;border-top:0px;">
                <!--{if 1}-->
                <div class="tDiv">
                    <div class="tDiv2">
                        <div class="fbutton">
                            <div>
                                <span class="add" style="padding-left: 20px;" onclick = 'category.add("","","")'>添加</span>
                            </div>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                </div>
                <!--{/if}-->
                <table id="goods_table" class="s" style="width: 100%;margin: 0 auto 8px;">
                    <thead>
                    <tr>
                        <th style="padding: 0;">
                            选项名称
                        </th>
                        <th style="width: 20%;padding: 0;">排序序号</th>
                        <!--{if $edit_permission}-->
                        <th style="width: 10%;padding: 0;">添加子级</th>
                        <th style="width: 10%;padding: 0;">修改</th>
                        <th style="width: 10%;padding: 0;">删除</th>
                        <!--{/if}-->
                    </tr>
                    </thead>

                    <tbody id="body">
                    <!--{foreach from = $itemMultiLevelList item = value}-->

                    <tr id = 'cate<!--{$value.item_id}-->' >
                        <td style="text-align: left;">
                            <div id="tdone_b_<!--{$value.item_id}-->" style="float:left">
                                <!--{if $value.hasMid == 1}-->
                                <div id="img_add_1" onclick="category.add_cate(<!--{$value.item_id}-->,'')" class="left closeImg"></div>
                                <!--{else}-->
                                <div class="left point"></div>
                                <!--{/if}-->
                            </div>
                            <div style = "float:left" id = 'b_cell1_<!--{$value.item_id}-->'>
                                <!--{$value.item_name}-->(<!--{$value.item_id}-->)
                            </div>

                        </td>
                        <td class="tac">
                            <!--{$value.sort_order}-->
                        </td>
                        <!--{if $edit_permission}-->
                        <td style="text-align: center;">
                            <div class="childCategory" onclick="category.addChild('b',<!--{$value.item_id}-->,'')" style="margin-left: 46px;"></div>
                        </td>
                        <td style="text-align: center;">
                            <div class="editCategory" onclick = "category.add('b',<!--{$value.item_id}-->,1)" style="margin-left: 46px;"></div>
                        </td>
                        <td style="text-align: center;">
                            <div class="delCategory" onclick = "category.catedelete('b',<!--{$value.item_id}-->)" style="margin-left: 46px;"></div>
                        </td>
                        <!--{/if}-->
                    </tr>

                    <!--{/foreach}-->
                    </tbody>
                </table>
            </div>

        </div>

</div>

<script type="text/javascript">

var manID = 0;

var category = {

    //显示第二,三级
    add_cate: function(cate_id,mid){

        manID++;
        if(manID > 1){
            manID--;
            return ;
        }

        var cate = '#cate'; //分类ID前缀
        var url = "/invokingAjax-backend/system/baseItem.ajax?operFlg=1&xjx=none";
        var tdone = "#tdone_b_";
        if(mid != ''){
            if(mid == 'mid'){
                cate = '#mcate'
                url = "/invokingAjax-backend/system/baseItem.ajax?operFlg=1&mid="+mid+"&xjx=none";
                tdone = "#tdone_m_";
            }
            if(mid == 'sid'){
                cate = '#scate'
                url = "/invokingAjax-backend/system/baseItem.ajax?operFlg=6&mid="+mid+"&xjx=none";
                tdone = "#tdone_s_";
            }

        }

        E.loadding.open('正在加载，请稍候...');
        $.ajax({
            type: "POST",
            url: url,
            dataType: "JSON",
            data: {'cate_id':cate_id},
            success: function( result_obj ) {
                E.loadding.close();
                manID = 0;
                if(mid == 'mid'){
                    $(tdone+cate_id).html('<div id="img_add_1" onclick="category.remove_cate('+cate_id+',\''+mid+'\')" class="left openImg"></div>');
                }
                if(mid == 'sid'){
                    $(tdone+cate_id).html('<div id="img_add_1" onclick="category.remove_cate('+cate_id+',\''+mid+'\')" class="left openImg"></div>');
                }
                $(tdone+cate_id).html('<div id="img_add_1" onclick="category.remove_cate('+cate_id+',\''+mid+'\')" class="left openImg"></div>');

                $(result_obj.tr).insertAfter(cate+cate_id);
            }
        })
    },
    //添加 编辑
    add: function(mark,editStr,aid) {

        this.editStr = editStr;
        this.mark = mark;
        this.aid = aid;

        if(editStr){
            var url = '/invokingAjax-backend/system/baseItem.ajax?operFlg=4&mark='+mark+'&editStr='+editStr+'&aid='+aid;
        }else{
            var url =  '/invokingAjax-backend/system/baseItem.ajax?operFlg=4';
        }
        E.loadding.open('正在操作，请稍候...');
        E.ajax_post({
            url: url,
            //data: {},
            call: "category.result"
        });
    },

    result: function(o){
        E.loadding.close();

        var title = "选项修改";

        if(o.editData == undefined){
            title = "选项新增";
            this.addBox = 'add_big';
            this.editcate = 'b';
        }

        E.popup.open({
            id: 'areaAdd',
            title: title, //弹出标题，不传则默认为“提示信息”【可选】
            //content: h,    //显示内容（html代码），不传则默认为空【可选】
            btnName: "提交", //“确认”按钮，不传则不显示
            btnCall: "category.helpSubmit();" ,//点击“确认”按钮触发的函数/方法
            css:"width:700px"
        });

        if(o.editData != undefined){
            //赋值
            $('#item_name').val(o.editData[0].item_name);
            $('#sort_order').val(o.editData[0].sort_order);
            $('#add_big').removeClass("helpHide");
        }

    },

    //添加子分类
    addChild : function(mark,editStr,aid){
        E.loadding.open('正在操作，请稍候...');
        this.editStr = editStr;
        this.mark = mark;
        this.aid = aid;
        E.ajax_post({
            url: '/invokingAjax-backend/system/baseItem.ajax?operFlg=4&mark='+mark+'&editStr='+editStr+'&aid='+aid,
            call: "category.addChildResult"
        });
    },

    addChildResult:function(o){
        E.loadding.close();

        var title = "添加子级";

        E.popup.open({
            id: 'areaAdd',
            title: title, //弹出标题，不传则默认为“提示信息”【可选】
            //content: h,    //显示内容（html代码），不传则默认为空【可选】
            btnName: "提交", //“确认”按钮，不传则不显示
            btnCall: "category.saveChild();" ,//点击“确认”按钮触发的函数/方法
            css:"width:700px"
        });
        if(o.editData != undefined){
            //编辑赋值
            $('#add_big').removeClass("helpHide");
        }

    },
    saveChild:function(){
        var msg = '';

        if(E.isEmpty($('#item_name').val())){
            msg += '选项名称不能为空<br/>';
        }

        if(!E.isNum($('#sort_order').val())){
            msg += '请填写正确排序序号<br/>';
        }

        this.dt = E.getFormValues('bigForm');

        if(this.mark == 'b'){
            this.editcate = 'm';
        }
        if(this.mark == 'm'){
            this.editcate = 's';
        }
        if(this.mark == 's'){
            this.editcate = 'l';
        }

        if(msg != ''){
            E.alert(msg);
            return;
        }
        category.helpSave();
    },

    helpSubmit: function(){
        var msg = '';

        //编辑提交

        var editStr = this.editStr;

        var aid = this.aid;

        if(E.isEmpty($('#item_name').val())){
            msg += '选项名称不能为空<br/>';
        }
        if(!E.isNum($('#sort_order').val())){
            msg += '请填写正确排序序号<br/>';
        }

        this.dt = E.getFormValues('bigForm');

        if(this.mark == 'b'){
            this.editcate = 'b';
        }
        if(this.mark == 'm'){
            this.editcate = 'm';
        }
        if(this.mark == 's'){
            this.editcate = 's';
        }
        if(this.mark == 'l'){
            this.editcate = 'l';
        }

        if(msg != ''){
            E.alert(msg);
            return;
        }

        category.helpSave();
    },

    helpSave: function(){

        E.loadding.open();

        E.ajax_post({
            url: '/invokingAjax-backend/system/baseItem.ajax?operFlg=100&act=edit&editStr='+this.editStr+'&editcate='+this.editcate+'&aid='+this.aid,
            data: this.dt,
            call: "category.saveResult"
        });

    },

    saveResult: function(o){

        if(o.code == 200){

            if(this.aid != ''){

                if(this.mark == 'b'){

                    $('#b_cell1_'+this.editStr).text(this.dt.item_name);
                    $('#cate'+this.editStr+' td:eq(1)').text(this.dt.sort_order);

                }
                if(this.mark == 'm'){

                    $('#m_cell1_'+this.editStr).text(this.dt.item_name);
                    $('#mcate'+this.editStr+' td:eq(1)').text(this.dt.sort_order);

                }
                if(this.mark == 's'){

                    $('#s_cell1_'+this.editStr).text(this.dt.item_name);
                    $('#scate'+this.editStr+' td:eq(1)').text(this.dt.sort_order);

                }

                if(this.mark == 'l'){

                    $('#l_cell1_'+this.editStr).text(this.dt.item_name);
                    $('#lcate'+this.editStr+' td:eq(1)').text(this.dt.sort_order);

                }

                E.popup.close();

            }else{

                if(this.mark == ''){
                    var aid = 1;

                    var str = '';
                    str  += '<tr id="cate'+o.data.item_id+'">';
                    str  += '<td style="text-align:left;"><div style = "float:left" id="tdone_b_'+o.data.item_id+'"><div class="left point" ></div></div><div id = "b_cell1_'+o.data.item_id+'" style="text-align:left;">'+o.data.item_name+'('+o.data.item_id+')'+'</div></div></td>';
                    str  += '<td  class = "tac">' +o.data.sort_order +'</td>';
                    str  += '<td style="text-align:center"><div class="childCategory" onclick="category.addChild(\'b\',\''+o.data.item_id+'\',\'\')" style="margin-left: 46px;"></td>';
                    str  += '<td style="text-align:center"><div class="editCategory" onclick = "category.add(\'b\',\''+o.data.item_id+'\',\''+aid+'\')" style="margin-left: 46px;"></div></td>';
                    str  += '<td style="text-align:center"><div class="delCategory" onclick = "category.catedelete(\'b\',\''+o.data.item_id+'\')" style="margin-left: 46px;"></div></td></tr>';

                    $('#body').append(str);
                }

                if(this.mark == 'b'){

                    var mid = '';
                    if(o.data.hasMid == 1){
                        E.loadding.close();
                        category.add_cate(o.data.parent_id,mid);
                    }else{
                        category.remove_cate(o.data.parent_id,mid);
                        E.loadding.close();
                        category.add_cate(o.data.parent_id,mid);
                    }

                }
                if(this.mark == 'm'){

                    var mid = 'mid';

                    if(o.data.hasMid == 1){
                        E.loadding.close();
                        category.add_cate(o.data.parent_id,mid);
                    }else{
                        category.remove_cate(o.data.parent_id,mid);
                        E.loadding.close();
                        category.add_cate(o.data.parent_id,mid);
                    }

                }

                if(this.mark == 's'){

                    var mid = 'sid';

                    if(o.data.hasMid == 1){
                        E.loadding.close();
                        category.add_cate(o.data.parent_id,mid);
                    }else{
                        category.remove_cate(o.data.parent_id,mid);
                        E.loadding.close();
                        category.add_cate(o.data.parent_id,mid);
                    }

                }

                E.popup.close();
            }

            E.alert(o.message,2);

        }else{
            E.alert(o.message);
        }

        E.loadding.close();

    },


    //隐藏分类
    remove_cate: function(cate_id,mid){
        $.ajax({
            type: "POST",
            url: "/invokingAjax-backend/system/baseItem.ajax?operFlg=2&mid="+mid+"&xjx=none",
            dataType: "JSON",
            data: {'cate_id':cate_id},
            success: function( result_obj ) {

                $(result_obj.idArr).each(function(i,n){
                    $('#mcate'+n).remove();
                    $('#scate'+n).remove();
                    $('#lcate'+n).remove();
                });

                if(mid == 'mid'){
                    $('#tdone_m_'+cate_id).html('<div id="img_add_1" onclick="category.add_cate('+cate_id+',\''+mid+'\')" class="left closeImg"></div>');
                }else if(mid == 'sid'){
                    $('#tdone_s_'+cate_id).html('<div id="img_add_1" onclick="category.add_cate('+cate_id+',\''+mid+'\')" class="left closeImg"></div>');
                }else{
                    $('#tdone_b_'+cate_id).html('<div id="img_add_1" onclick="category.add_cate('+cate_id+',\''+mid+'\')" class="left closeImg"></div>');
                }
            }
        })
    },

    cStr : '' ,
    uFlg : '' ,
    //删除分类
    catedelete: function(markType,delete_str){
        this.delete_str = delete_str;
        this.markType = markType;
        E.confirm("您确认要删除选中的选项吗？", "category.deleteConfirm");
    },
    deleteConfirm: function(){
        $.ajax({
            type: "POST",
            url: "/invokingAjax-backend/system/baseItem.ajax?operFlg=100&act=del&markType="+this.markType+"&delete_str=" + this.delete_str,
            dataType: "JSON",
            success: function( result_obj ) {
                if (result_obj.code == 200) {
                    E.alert(result_obj.message, 2);

                    $(result_obj.midArr).each(function(i,n){
                        $('#cate'+n).remove();
                        $('#mcate'+n).remove();
                        $('#scate'+n).remove();
                        $('#lcate'+n).remove();
                    })

                } else {
                    E.alert(result_obj.message);
                }
            }
        });
    }

}

</script>


<!--HTML OPEN-->
<div style="display:none">
    //选项添加
    <div id="areaAdd" style="display:none">
        <div id="select-content">
            <div id="add_big">
                <form id="bigForm" class="form-horizontal" role="form" onsubmit="return false;">
                    <div class="form-group">
                        <label for="item_name" class="col-sm-2 control-label"><span style="color:red;">*</span>&nbsp;选项名称：</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="item_name" name="item_name" placeholder="请输入选项名称" style="width: 350px"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="sort_order" class="col-sm-2 control-label"><span style="color:red;">*</span>&nbsp;排序序号：</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="sort_order" name="sort_order" placeholder="请输入排序序号" style="width: 350px"/>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!--END HTML OPEN-->
</body>

</html>
